<template>
  <div class="container">
        <span style="span-size:15px;span-family:'Microsoft YaHei'">
            患者信息查询</span>&nbsp;
    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="span-size:13px;span-family:'Microsoft YaHei'">病 历 号 :</span>&nbsp;
          <el-input placeholder="病历号" style="width: 110px" again="left" v-model="keywords">
          </el-input>
        </div>
      </el-col>

      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-button type="primary" style="margin-left: 3px"
                     @click="gosearch"><el-icon><Search /></el-icon> 搜索
          </el-button>
        </div>
      </el-col>
    </el-row>

    <br>
    <span style="span-size:15px;span-family:'Microsoft YaHei'">
            患者信息确认</span>&nbsp;

    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="span-size:13px;span-family:'Microsoft YaHei'">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>&nbsp;
          <el-input placeholder="姓名" style="width: 110px" again="left" readonly
                    v-model="info.realname">
          </el-input>
        </div>
      </el-col>

      <el-col :span="7">
        <div class="grid-content bg-purple">
          <span style="span-size:13px;span-family:'Microsoft YaHei'">身份证号:</span>
          <el-input placeholder="身份证号" style="width: 180px" readonly
                    v-model="info.idnumber"></el-input>
        </div>
      </el-col>

      <el-col :span="9">
        <div class="grid-content bg-purple">
          <span style="span-size:13px;span-family:'Microsoft YaHei'">家庭住址:</span>
          <el-input placeholder="家庭住址" style="width: 330px" readonly
                    v-model="info.address"></el-input>
        </div>
      </el-col>
    </el-row>

    <!-- :data="categories"  -->
    <el-main class="gao_cate_mana_main">
            <span style="span-size:15px;span-family:'Microsoft YaHei'">
                患者消费信息</span>&nbsp;
      <el-table ref="singleTable" :data="checktable" @selection-change="handleCheckSelectionChange"
                style="width: 1200px;margin:10px;padding: 10px;" :show-header="true">
        <el-table-column type="selection" :selectable="checkSelectable" width="120">
        </el-table-column>
        <el-table-column property="medicalid" label="病历号" width="120">
        </el-table-column>
        <el-table-column property="name" label="项目名称" width="200">
        </el-table-column>
        <el-table-column property="num" label="单价" width="80">
        </el-table-column>
        <el-table-column property="creationtime" label="开立时间" width="250">
        </el-table-column>
        <el-table-column property="num" label="状态" width="80">
          <template #default="scope">
            {{ scope.row.state === 0 ? '未开具' : scope.row.state === 1 ? '已开具':scope.row.state === 2 ? '已缴费':scope.row.state === 3 ? '正在检查':scope.row.state === 4 ? '已完成':'未知' }}
          </template>
        </el-table-column>


      </el-table>

      <br>
      <el-col :span="4" >
        <el-tag size="large" style="font-size: 14px">本项目金额合计：</el-tag>
        <el-tag type="warning" size="large" style="font-size: 14px">
          {{ totalAmount.toFixed(2) }}
        </el-tag>
      </el-col>
      <br>
      <!--:disabled="selItems.length==0" -->
      <el-button type="primary" icon="el-icon-goods"
                 style="margin-top: 10px;width: 100px;"
                 @click="charge" v-if="checktable.length>0">收费结算
      </el-button>
    </el-main>
  </div>
</template>


<script setup>
import {computed, onMounted, ref} from 'vue'
import service from '@/utils/request'
import {ElNotification} from "element-plus";
let checktable=ref([])
let keywords = ref('')      //要查询的关键字：病历号
let tableData = ref([])     //患者消费信息
let info = ref({realname:'',idnumber:'',address:''})    //患者的确认信息
let tableInfo = ref([])
const selectedCheckItems = ref([]);
const totalAmount = computed(() => {
  return selectedCheckItems.value.reduce((sum, item) => {
    return sum + (parseFloat(item.num) || 0);
  }, 0);
});
function checkSelectable(row, index) {
  return row.state === 1; // 只有状态为0（未开具）的行才可选择
}
function handleCheckSelectionChange(selection) {
  selectedCheckItems.value = selection;
  console.log('选中的检查项目:', selection);
  console.log('总金额:', totalAmount.value);
}
function gosearch(){
  //根据mid（keywords）查询checkapply and price
  console.log(keywords.value)
  service.post("/register/searchforidnumberaddress", {casenumber:keywords.value}).then(
      res=>{
        console.log(res.data)
        info.value.realname = res.data.realname
        info.value.address =  res.data.homeaddress
        info.value.idnumber =  res.data.idnumber
      }
  )
  updatedata()
}
function updatedata(){
  console.log("updatedata")
  console.log(keywords.value)
  service.post("/check/listbymedicalid?medicalid="+ Number(keywords.value)).then(
      res => {
        console.log("listbymedicalid")
        console.log(res.data)
        checktable.value = res.data;
        console.log(checktable.value)
      }
  )
}
function charge(){
  console.log(selectedCheckItems.value)
  service.post("/check/checkout",selectedCheckItems.value).then(
      res => {
        console.log("addapply")
        console.log(res.data)
        if(res){
          console.log("addapply：true")
          updatedata()
          ElNotification({
            title: '成功',
            message: `已提交检查`,
            type: 'success'
          });
        }
      }
  )
}

onMounted(() => {
  // console.log("组件挂载成功")
})
</script>